<template>
	<view>
		<view class="d-flex a-center border-top border-bottom" style="padding: 30upx 46upx;flex-wrap: wrap;">
			<view v-for="(item,index) in typeList" :class="[defaultIdx == index?'active':'']" @click="switchOption(index)" class="type-btn d-flex j-center mr-2" style="margin-bottom: 16upx;" :key="index">
				<text>{{item.label}}(7)</text>
			</view>
		</view>
		<view v-for="(item,index) in estateComment" :key="index" class="d-flex flex-column j-sb comment-item border-bottom">
			<view class="d-flex a-center" style="height: 80upx;">
				<image src="../../../static/images/estate/author.png" style="width: 76upx;height: 76upx;border-radius: 38upx;" mode=""></image>
				<view class="d-flex flex-column j-sb" style="margin-left: 10upx;height: 80upx;margin-top: -16upx;">							
					<text style="font-size: 32upx;color: #2A2A2A;font-weight: bold;">{{item.userName}}</text>
					<uni-rate size="20" :activeColor="starColor" :value="item.score"></uni-rate>
				</view>
			</view>
			<view style="margin-top: 20upx;">
				<text style="font-size: 32upx;color: #2A2A2A;">{{item.content}}</text>
			</view>
			<view class="d-flex j-sb a-center" style="font-size: 24upx;color: #999999;">
				<text>{{item.commentDate}}</text>
				<view class="d-flex">
					<view style="margin-right: 20upx;">
						<text style="margin-right: 10upx;" class="iconfont icon-pinglun1"></text>
						<text>(0)</text>
					</view>
					<view>
						<text style="margin-right: 10upx;" class="iconfont icon-dianzan1"></text>
						<text>(0)</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				starColor: '#23C996',
				defaultIdx: 0,
				estateComment:[],
				typeList:[
					{"label":"全部"},
					{"label":"好评"},
					{"label":"五星"},
					{"label":"有图"},
					{"label":"最新"}
				],
				contentId:''
			}
		},
		onLoad(options){
			if(options.contentId){
				this.contentId = options.contentId;
				this.getCommentList()
			}
		},
		components:{
			uniTag,
			uniRate
		},
		methods: {
			switchOption(idx){
				this.defaultIdx = idx;
			},
			getCommentList(){
				let _this = this;
				api.request({
						url: '/lpxx/comments',
						data: {
							contentId: _this.contentId
						}
					})
					.then(response => {
						// console.log(response)
						_this.estateComment = response;
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	}
</script>

<style scoped>
.comment-item{
	height: 250upx;
	width: 670upx;
	padding: 30upx 0upx;
	margin: 0 40upx;
}
.type-btn{
	background: #FFFFFF;
	border: 2upx solid #333333;
	border-radius: 8upx;
	width: 140upx;
	height: 56upx;
	font-size: 28upx;
}
.type-btn.active{
	background: #005BAD;
	color: #FFFFFF!important;
	border:none
}
</style>

